<template>
  <div class="cain-login">
    <div class="cain-form">
      <!-- <h1>登录</h1> -->
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <div class="login-form-wrap">
          <a-form-item name="remember" no-style>
            <a-checkbox v-model:checked="formState.remember"
              >Remember me</a-checkbox
            >
          </a-form-item>
          <a class="login-form-forgot" href="">Forgot password</a>
        </div>

        <a-form-item>
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
          >
            Log in
          </a-button>
          Or
          <a href="">register now!</a>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, computed } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import routerx from "../../store/modules/route";
import { useRouter } from "vue-router";
import { setToken } from "../../utils/auth";
interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

const router = useRouter();
const formState = reactive<FormState>({
  username: "",
  password: "",
  remember: true,
});
const onFinish = async (values: any) => {
  // setToken("admin");
  await routerx.dispatch("login", formState);
  // routerx.commit('set_token')
  router.push("/");
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});
</script>

<style lang="scss" scoped>
.cain-login {
  width: 100%;
  height: 100vh;
  .cain-form {
    width: 500px;
    height: 400px;
    border: 1px red solid;
    margin: 200px auto;
    padding: 20px;
    // text-align: center;
  }
}

.login-form {
  max-width: 300px;
}
.login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-form-forgot {
  margin-bottom: 24px;
}
.login-form-button {
  width: 100%;
}
</style>
